<template>
  <div>
    <h1>发现</h1>
    <div class="nav">
      <span
        v-for="item in navList"
        :key="item.id"
        :class="{ active: item === navName }"
        @click="navFn(item)"
      >
        {{ item }}
      </span>
      <span @click="getPlayList">...</span>
    </div>
    <div v-show="showPlayList" class="playlist">
      <div v-for="item in newList" :key="item.id" class="item">
        <div class="name">
          {{ item.name }}
        </div>
        <div class="cats">
          <div v-for="val in item.children" :key="val.id" class="cat">
            <span
              :class="{ active: val.name === cateName }"
              @click="addCate($event, val)"
            >{{ val.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <el-row>
        <el-col v-for="(val, index) in songList" :key="index" class="items">
          <song-list
            :id="val.id"
            :src="val.coverImgUrl"
            :title="val.description"
          >
            <div>
              <div class="play-count">
                <span class="iconfont icon-bofang" />
                <span> {{ val.playCount | parseIntNum }}万 </span>
              </div>
              <div
                class="text"
                @click="$router.push({ path: `/playlist/${val.id}` })"
              >
                {{ val.name }}
              </div>
            </div>
          </song-list>
        </el-col>
      </el-row>
    </div>
    <div v-if="navName !== '排行榜'" class="more">
      <button @click="getMore">加载更多</button>
    </div>
  </div>
</template>

<script>
import songList from '@/components/songlist.vue'
import {
  getPlayList,
  getSongList,
  bestSongList,
  recommendSongList,
  rankingList
} from '@/api/songs'
import { getLoginStatus } from '@/api/user'
export default {
  name: 'Find',
  components: {
    songList
  },
  filters: {
    parseIntNum(val) {
      return (val / 10000).toFixed(1)
    }
  },
  data() {
    return {
      navList: ['全部', '推荐歌单', '精品歌单', '排行榜'],
      newList: [],
      showPlayList: false,
      cateName: '',
      navName: '全部',
      songList: [],
      limit: 50,
      offset: 1
      // currentName: '全部' // 导航列表 默认为全部
    }
  },
  created() {
    this.getSongList()
    this.getLoginStatus()
  },
  methods: {
    // 获取歌单列表
    async getSongList() {
      const res = await getSongList()
      this.songList = res.data.playlists
    },
    // 获取全部分类列表
    async getPlayList() {
      this.showPlayList = !this.showPlayList
      const res = await getPlayList()
      // console.log(res.data)
      this.newList = this.transList(res.data.categories, res.data.sub)
    },
    // 分类数据转换方法
    transList(object, list) {
      const arr = []
      for (var item in object) {
        const obj = {}
        obj.id = item
        obj.name = object[item]
        arr.push(obj)
        obj.children = []
        list.forEach((val) => {
          if (val.category === item - 0) {
            obj.children.push(val)
          }
        })
      }
      // console.log(arr)
      return arr
    },
    // 点击添加分类导航
    addCate(e, obj) {
      if (this.navList.indexOf(obj.name) !== -1) {
        const index = this.navList.indexOf(obj.name)
        e.target.style.color = '#000'
        this.navList.splice(index, 1)
      } else {
        this.navList.push(obj.name)
        e.target.style.color = '#335eea'
      }
    },
    async getLoginStatus() {
      const res = await getLoginStatus()
      console.log(res)
    },
    // 点击导航
    async navFn(item) {
      // console.log(item)
      this.navName = item
      this.showPlayList = false
      if (item === '推荐歌单') {
        const res = await recommendSongList({ limit: this.limit })
        this.songList = res.data.result
        this.songList.forEach((val) => {
          val.coverImgUrl = val.picUrl
        })
      } else if (item === '精品歌单') {
        const res = await bestSongList({ limit: this.limit })
        this.songList = res.data.playlists
      } else if (item === '排行榜') {
        const res = await rankingList()
        this.songList = res.data.list
      } else {
        const res = await getSongList({ cat: item })
        this.songList = res.data.playlists
      }
    },
    // 加载更多
    async getMore() {
      if (this.navName === '推荐歌单') {
        this.limit += 50
        const res = await recommendSongList({ limit: this.limit })
        this.songList = res.data.result
        this.songList.forEach((val) => {
          val.coverImgUrl = val.picUrl
        })
      } else if (this.navName === '精品歌单') {
        const res = await bestSongList({
          limit: this.limit,
          before: this.songList[this.songList.length - 1].updateTime
        })
        this.songList = [...this.songList, ...res.data.playlists]
      } else {
        this.offset++
        const res = await getSongList({ offset: this.offset * this.limit })
        this.songList = [...this.songList, ...res.data.playlists]
      }
    }
  }
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 56px;
  color: #000;
  // text-align: left;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  span {
    cursor: pointer;
    padding: 8px 16px;
    margin: 10px 16px 6px 0;
    border-radius: 10px;
    color: #7a7a7b;
    background-color: rgb(245, 245, 247);
    font-weight: bold;
    &:hover {
      background-color: rgb(232, 239, 253);
      color: #335eea;
    }
    .active {
      background-color: rgb(232, 239, 253);
      color: #335eea;
    }
  }
  .active {
    background-color: rgb(232, 239, 253);
    color: #335eea;
  }
}
.playlist {
  margin-top: 20px;
  border-radius: 10px;
  padding: 8px;
  color: #000;
  background-color: rgb(245, 245, 247);
  .item {
    display: flex;
    margin-bottom: 32px;
    .name {
      font-size: 24px;
      font-weight: 700;
      opacity: 0.68;
      margin-left: 24px;
      min-width: 54px;
      height: 26px;
      margin-top: 8px;
    }
    .cats {
      // margin-top: 8px;
      margin-left: 24px;
      display: flex;
      flex-wrap: wrap;
      .cat {
        margin: 4px 0 0 0;
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 16px;
        transition: 0.2s;
        min-width: 98px;
        .active {
          color: #335eea;
        }
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          padding: 6px 12px;
          height: 26px;
          border-radius: 10px;
          opacity: 0.88;
          &:hover {
            color: #335eea;
            background-color: rgb(232, 239, 253);
          }
        }
      }
    }
  }
}
.main {
  display: flex;
  margin-top: 24px;
  .items {
    width: 198px;
    height: 269px;
    margin: 5px;
    .text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .play-count {
      color: rgb(155, 155, 155);
      font-size: 12px;
      .icon-bofang {
        font-size: 12px;
      }
    }
    img {
      width: 100%;
    }
  }
}
.more {
  margin: 50px 0;
  display: flex;
  justify-content: center;
  button {
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }
}
</style>
